<template>
  <div class="carousel1">
    <Carousel v-model="currentCarouselIndex" :list="data" :interval="5000" />
    <div class="content-container">
      <MButton v-slide-up @click="handleDetail" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Carousel from "@/components/Carousel/index.vue";
import { ref } from "vue";
const router = useRouter();

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

const currentCarouselIndex = ref(0); // 当前轮播图索引

// 跳转详情
const handleDetail = () => {
  router.push("/pc/about");
};
</script>

<style lang="scss" scoped>
.carousel1 {
  width: 100%;
  height: 100vh;
  position: relative;

  .content-container {
    position: absolute;
    top: 70%;
    left: 10%;
    z-index: 10;
    height: 100%;
  }
}
</style>
